<template>
  <div class="container">
    <ul class="cell-group first"><a href="javascript:;"  @click="goRouter(88)" ref="r">热门歌手</a></ul>
    <ul class="cell-group">
      <li class="cell-item" >
        <a href="javascript:;" @click="goRouter(1)" ref="n">华语男歌手</a>
      </li>
      <li class="cell-item">
       <a href="javascript:;"  @click="goRouter(2)" ref="nv">华语女歌手</a>
      </li>
      <li class="cell-item">
       <a href="javascript:;"  @click="goRouter(3)" ref="zh">华语组合</a>
      </li>
    </ul>
    <ul class="cell-group">
      <li class="cell-item" >
      <a href="javascript:;" @click="goRouter(4)">日韩男歌手</a>
      </li>
      <li class="cell-item" >
        <a href="javascript:;" @click="goRouter(5)">日韩女歌手</a>
      </li>
      <li class="cell-item" >
       <a href="javascript:;" @click="goRouter(6)">日韩组合</a>
      </li>
    </ul>
    <ul class="cell-group">
      <li class="cell-item" >
       <a href="javascript:;" @click="goRouter(7)">欧美男歌手</a>
      </li>
      <li class="cell-item" >
       <a href="javascript:;" @click="goRouter(8)">欧美女歌手</a>
      </li>
      <li class="cell-item" >
       <a href="javascript:;" @click="goRouter(9)">欧美组合</a>
      </li>
    </ul>
  </div>
</template>

<script>
    export default{
        methods: {
            goRouter(id){
                this.$router.push({path:`/singer/list/${id}`})
            }
        }
    }
</script>

<style scoped>

.container {
  width: 100%;
  padding: 0 10px;
  overflow: hidden;
}

.cell-group {
  width: 100%;
  margin: 15px 0;
  border: 1px solid #e4e4e4;
  border-bottom: none;
  border-radius: 5px;
  background-color: #fbfbfb;
  /* padding:6px; */
}
li,
.first {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 45px;
  font-size: 16px;
  
}

a{
    width: 93%;
    /* padding:15px; */
    color:#333;
    display: block;
    margin-left: 15px;
    background: url("../assets/images/arrow_icon.png") no-repeat right
}
</style>



